// src/components/scholarDashboard/mainContent/DashboardTabs.tsx

import { GrOverview } from "react-icons/gr";
import { FaTable } from "react-icons/fa";
import { CiSearch } from "react-icons/ci";
import { BsCalendar3 } from "react-icons/bs";
import type { FC } from "react";
import { useDashboardTabStore } from '@/store/dashboardTabStore';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

interface DashboardTabsProps {
  searchText: string;
  setSearchText: (text: string) => void;
  onSearchClick: () => void;
  startDate?: string;
  setStartDate?: (date: string) => void;
  endDate?: string;
  setEndDate?: (date: string) => void;
}

const DashboardTabs: FC<DashboardTabsProps> = ({
  searchText,
  setSearchText,
  onSearchClick,
  startDate,
  setStartDate,
  endDate,
  setEndDate,
}) => {
  const { currentTab, setTab } = useDashboardTabStore();

  const startDateObj = startDate ? new Date(startDate) : null;
  const endDateObj = endDate ? new Date(endDate) : null;

  const handleStartDateChange = (date: Date | null) => {
    if (date) {
      const dateString = date.toISOString().split('T')[0];
      setStartDate?.(dateString);
    } else {
      setStartDate?.('');
    }
  };

  const handleEndDateChange = (date: Date | null) => {
    if (date) {
      const dateString = date.toISOString().split('T')[0];
      setEndDate?.(dateString);
    } else {
      setEndDate?.('');
    }
  };

  return (
    <div className="w-full flex flex-col gap-4 px-4 py-2 font-poppins">
      {/* Tabs */}
      <div className="flex gap-2 sm:gap-6 border-b border-gray-200 dark:border-slate-800 text-xs sm:text-base overflow-x-auto scrollbar-thin scrollbar-thumb-gray-200 pb-2">
        <button
          onClick={() => setTab("overview")}
          className={`flex items-center gap-2 px-3 sm:px-4 py-2.5 rounded-xl transition-all duration-200 whitespace-nowrap font-medium
            ${currentTab === "overview"
              ? "bg-blue-100 dark:bg-slate-800 text-blue-700 dark:text-cyan-300 font-semibold shadow-sm border border-blue-200 dark:border-slate-700"
              : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-800 hover:text-blue-700 dark:hover:text-cyan-300 border border-transparent"}
          `}
        >
          <GrOverview size={18} />
          <span className="hidden lg:inline">Overview</span>
        </button>
        <button
          onClick={() => setTab("table")}
          className={`flex items-center gap-2 px-3 sm:px-4 py-2.5 rounded-xl transition-all duration-200 whitespace-nowrap font-medium
            ${currentTab === "table"
              ? "bg-blue-100 dark:bg-slate-800 text-blue-700 dark:text-cyan-300 font-semibold shadow-sm border border-blue-200 dark:border-slate-700"
              : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-800 hover:text-blue-700 dark:hover:text-cyan-300 border border-transparent"}
          `}
        >
          <FaTable size={16} />
          <span className="hidden lg:inline">Table</span>
        </button>
      </div>

      {currentTab === "table" && (
        <div className="w-full flex flex-col items-stretch space-y-3">
          {/* Date Filters Row */}
          <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-lg border border-gray-200 dark:border-slate-700 px-4 sm:px-6 py-4 flex flex-row flex-nowrap items-center gap-3 w-full overflow-x-auto transition-all duration-300">
            <div className="flex items-center gap-2 flex-shrink-0">
              <BsCalendar3 className="text-blue-500 dark:text-cyan-400" size={18} />
              <span className="text-sm font-medium text-gray-600 dark:text-gray-400">ITE Date Range:</span>
            </div>
            <div className="flex-1 flex gap-3 min-w-0">
              {/* Start Date */}
              <div className="flex-1 min-w-0">
                <div className="relative">
                  <DatePicker
                    selected={startDateObj}
                    onChange={handleStartDateChange}
                    selectsStart
                    startDate={startDateObj || undefined}
                    endDate={endDateObj || undefined}
                    placeholderText="Select start date"
                    dateFormat="dd/MM/yyyy"
                    className="pl-10 pr-3 py-2.5 w-full rounded-xl border border-gray-300 dark:border-slate-700 text-sm text-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-slate-800 hover:bg-white dark:hover:bg-slate-700 focus:bg-white dark:focus:bg-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 transition-all duration-200 cursor-pointer"
                    wrapperClassName="w-full"
                    popperClassName="!z-[9999]"
                    popperPlacement="bottom-start"
                    showPopperArrow={false}
                    portalId="datepicker-portal"
                    calendarClassName="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-lg"
                    dayClassName={date =>
                      date && startDateObj && date.getTime() === startDateObj.getTime()
                        ? "bg-blue-600 text-white rounded-lg"
                        : date && endDateObj && date.getTime() === endDateObj.getTime()
                          ? "bg-blue-600 text-white rounded-lg"
                          : date && startDateObj && endDateObj && date > startDateObj && date < endDateObj
                            ? "bg-blue-100 dark:bg-cyan-900 text-blue-700 dark:text-cyan-300"
                            : ""
                    }
                  />
                  <span className="absolute inset-y-0 left-3 flex items-center text-gray-400 dark:text-gray-500 pointer-events-none">
                    <BsCalendar3 size={16} />
                  </span>
                </div>
              </div>

              {/* End Date */}
              <div className="flex-1 min-w-0">
                <div className="relative">
                  <DatePicker
                    selected={endDateObj}
                    onChange={handleEndDateChange}
                    selectsEnd
                    startDate={startDateObj || undefined}
                    endDate={endDateObj || undefined}
                    minDate={startDateObj || undefined}
                    placeholderText="Select end date"
                    dateFormat="dd/MM/yyyy"
                    className="pl-10 pr-3 py-2.5 w-full rounded-xl border border-gray-300 dark:border-slate-700 text-sm text-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-slate-800 hover:bg-white dark:hover:bg-slate-700 focus:bg-white dark:focus:bg-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 transition-all duration-200 cursor-pointer"
                    wrapperClassName="w-full"
                    popperClassName="!z-[9999]"
                    popperPlacement="bottom-start"
                    showPopperArrow={false}
                    portalId="datepicker-portal"
                    calendarClassName="bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-lg"
                    dayClassName={date =>
                      date && startDateObj && date.getTime() === startDateObj.getTime()
                        ? "bg-blue-600 text-white rounded-lg"
                        : date && endDateObj && date.getTime() === endDateObj.getTime()
                          ? "bg-blue-600 text-white rounded-lg"
                          : date && startDateObj && endDateObj && date > startDateObj && date < endDateObj
                            ? "bg-blue-100 dark:bg-cyan-900 text-blue-700 dark:text-cyan-300"
                            : ""
                    }
                  />
                  <span className="absolute inset-y-0 left-3 flex items-center text-gray-400 dark:text-gray-500 pointer-events-none">
                    <BsCalendar3 size={16} />
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Main Search Row */}
          <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-lg border border-gray-200 dark:border-slate-700 px-4 sm:px-6 py-4 flex flex-row flex-nowrap items-center gap-3 w-full overflow-x-auto transition-all duration-300">
            {/* Search bar + button group */}
            <div className="flex-1 min-w-0">
              <div className="relative w-full">
                <span className="absolute inset-y-0 left-4 flex items-center text-gray-400 dark:text-gray-500">
                  <CiSearch size={18} />
                </span>
                <input
                  type="text"
                  value={searchText}
                  onChange={(e) => setSearchText(e.target.value)}
                  placeholder="Search by name, student ID, email, sponsor name, or department..."
                  className="pl-12 pr-4 py-2.5 w-full rounded-xl border border-gray-300 dark:border-slate-700 text-sm text-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-slate-800 hover:bg-white dark:hover:bg-slate-700 focus:bg-white dark:focus:bg-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-700 focus:border-blue-400 dark:focus:border-cyan-700 transition-all duration-200 truncate"
                />
              </div>
            </div>
            <div className="flex gap-2 flex-shrink-0">
              <button
                onClick={onSearchClick}
                className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-blue-600 dark:bg-cyan-700 text-white text-sm font-medium hover:bg-blue-700 dark:hover:bg-cyan-800 hover:shadow-md transition-all duration-200 shadow-sm truncate"
              >
                <CiSearch size={16} />
                <span className="hidden lg:inline">Search</span>
              </button>
              <button
                onClick={() => {
                  setSearchText('');
                  setStartDate?.('');
                  setEndDate?.('');
                  onSearchClick();
                }}
                className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-blue-400 dark:border-cyan-700 bg-blue-50 dark:bg-slate-800 text-blue-700 dark:text-cyan-300 text-sm font-medium hover:bg-blue-100 dark:hover:bg-slate-700 hover:shadow-sm transition-all duration-200 shadow-sm truncate"
              >
                <span className="hidden lg:inline">Clear</span>
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default DashboardTabs;